<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            position: absolute;
            top: -4px;
            left: 105px;
        }

        div {
            position: relative;
            margin: 0 auto;
            max-width: 1000px;
        }

        p {
            text-indent: 2em;
            word-break: break-all;
            margin: 0;
        }

        li {
            border-bottom: 1px dotted red;
            font-size: 16px;
        }

        #time {
            position: absolute;
            margin-left: 50px;
            font-size: 10px;
        }
        #infobox{
            margin-top: 10px;
        }
        li:hover{
            background-color: rgba(250,250,210, 1);
        }
    </style>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>

<body>
    <div>
        <h3>全部评论</h3> <a href="http://127.0.0.1:8081/post.html" class="btn btn-info">发布新评论</a>
        <ul class="list-unstyled">
            {{each list}}
            <li data-id="{{$value.id}}">
                <div id="infobox">
                    <span id="name"><strong>{{$value.name}}</strong></span>
                    <span id="time"><em><small></small>{{$value.time}}</small></em></span>
                </div>
                <div id="pbox">
                    <p class="lead">{{$value.con}}</p>
                </div>
            </li>
            {{/each}}
            <!-- <li>
                <div id="infobox">
                     <span id="name">peter</span>
                     <span id="time">2020/11/5 1.30</span>
                </div>
                <div id="pbox">
                    <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
                </div>
            </li> -->
        </ul>
    </div>

</body>
<script src="jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<!-- <script type="text/html" id="temp">
    {{each list}}
        <li data-id="{{$value.id}}">
            <div id="infobox">
                <span id="name">{{$value.name}}</span>
                <span id="time">{{$value.time}}</span>
            </div>
            <div id="pbox">
                <a href="http://localhost:8081/del?id={{$value.id}}">删除</a> 
                <p>{{$value.con}}</p>
            </div>
        </li> 
    {{/each}}  
</script> -->

<!-- <script>
//     $(document).ready(function () {
//         $.ajax({
//             async : false,
//             url: "http://localhost:8081/list",
//             method: 'get',
//             dataType: 'jsonp',
//             cache: false,
//             beforeSend: function (xmlHttp) {
//                 xmlHttp.setRequestHeader("If-Modified-Since", "0");
//                 xmlHttp.setRequestHeader("Cache-Control", "no-cache");
//             },
//             success: function (backdata) {
//  //               console.log(backdata)
//                 let newData = template("temp", {
//                     list:JSON.parse( backdata)
//                 });
//  //               console.log(newData);
//                 $("ul").append(newData);
//             }
//         })
//     }) 
</script> -->
</html>